<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <div class="search">
        <div class="searchcopy">
          <el-form-item label="AGV编号:">
            <el-input
              v-model="queryParams.agvCode"
              placeholder="请输入AGV编号"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
              @keyup.native="keyUp"
              minlength="1"
              maxlength="20"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="AGV状态:">
            <el-select v-model="queryParams.status" placeholder="请选择AGV状态" filterable clearable
                       style="width: 240px">
              <el-option v-for="item in agvstate" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </div>
        <div class="search-btn-style">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
          >重置
          </el-button
          >
        </div>
      </div>
    </el-form>
    <el-table v-loading="loading" :data="stationList">
      <el-table-column label="AGV编号" align="center" prop="agvCode" :show-overflow-tooltip="true"/>
      <el-table-column label="" align="center" prop="agvName" :show-overflow-tooltip="true"/>
      <el-table-column label="AGV电量" align="center" prop="battery" sortable :show-overflow-tooltip="true">
        <template v-slot="scope">
          <span v-if="scope.row.battery >= 60" class="success">{{ scope.row.battery }}%</span>
          <span v-else-if="scope.row.battery >= 20" class="middle">{{ scope.row.battery }}%</span>
          <span v-else-if="scope.row.battery >= 0" class="fail">{{ scope.row.battery }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="AGV状态" align="center" prop="status" :show-overflow-tooltip="true"
                       :formatter="statusmatter">
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="createTime" sortable :show-overflow-tooltip="true"
                       width="180">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <malfunction
      ref="editcomponents"
      :recordId="sondata.recordId"
      :dialogVisible="sondata.dialogVisible"
      :title="sondata.title"
    ></malfunction>
  </div>
</template>

<script>
import malfunction from "@/views/AGV/management/malfunction.vue";
import {getAGVlist} from "@/api/AGV/management";
import {listData} from "@/api/system/dict/data";

export default {
  name: "Role",
  components: {
    malfunction: malfunction,
  },
  async mounted() {
    await this.getUseList();
    await this.getStatusList();
    await this.getTypeList();
    this.getList();
  },
  data() {
    return {
      agvId: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 记录ID
      recordId: 0,
      // 列表
      stationList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        agvCode: null,
        isEnable: null,
        status: null,
      },
      // 查询参数
      malfunctionParams: {
        pageNo: 1,
        pageSize: 10,
      },
      sondata: {
        title: null,
        dialogVisible: null,
        recordId: null,
      },
      // agv的状态
      agvstate: null,
      // agv是否启用
      agvsuse: null,
      // agv类型
      agvtype: null,
    };
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      getAGVlist(this.queryParams).then((response) => {
        this.stationList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 数据字典
    getUseList() {
      let data = {
        dictType: "agv_use",
      };
      return listData(data).then((res) => {
        this.agvsuse = res.data.list;
      });
    },
    getStatusList() {
      let data = {
        dictType: "agv_status",
        pageNo: 1,
        pageSize: 200,
      };
      return listData(data).then((res) => {
        this.agvstate = res.data.list;
      });
    },
    getTypeList() {
      let data = {
        dictType: "agv_type",
      };
      return listData(data).then((res) => {
        this.agvtype = res.data.list;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.agvCode = null;
      this.queryParams.isEnable = null;
      this.queryParams.status = null;
      this.handleQuery();
    },
    // 故障记录
    failure(row) {
      this.$refs.editcomponents.dialogVisible = true;
      this.sondata.title = "AGV故障记录";
      this.sondata.recordId = row.id;
    },
    //处理列表数据
    statusmatter(row) {
      let status = this.agvstate.filter((item) => {
        return item.value == row.status;
      });
      return status[0]?.label;
    }
  },
};
</script>

<style scoped>
.bad {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 8px 2px 0;
  background-color: red;
}

.leisure {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 8px 2px 0;
  background-color: #faad14;
}

.operation {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 8px 2px 0;
  background-color: #38b865;
}

.searchcopy {
  background-color: #fff;
  padding: 0 20px;
  padding-top: 17px;
  border-radius: 4px;
  display: inline-block;
}

.issue-pagination {
  margin-top: 26px;
}

/deep/ .el-dialog {
  width: 790px !important;
}

.success {
  display: inline-block;
  width: 45px;
  height: 30px;
  line-height: 30px;
  background-color: #eafff1;
  color: #38b865;
  border: 1px solid #4dc075;
  border-radius: 4px;
}

.fail {
  display: inline-block;
  width: 45px;
  height: 30px;
  line-height: 30px;
  background-color: #fff1ea;
  color: #eb5e12;
  border: 1px solid #ef7f43;
  border-radius: 4px;
}

.middle {
  display: inline-block;
  width: 45px;
  height: 30px;
  line-height: 30px;
  background-color: #fff8ea;
  color: #faad14;
  border: 1px solid #faad14;
  border-radius: 4px;
}

.search > * {
  padding: 0;
  margin-right: 30px !important;
}
</style>
